<template>
    <div class="news">
        <div class="header_icon">
            <a id="header_icon_img">
                <span>亚盟新闻中心</span>
                <img id="icon_img" src="" alt="">
            </a>
        </div>
        <div class="news_list container">

            <!-- 可设置偏移：col-md-offset-... -->
            <div class="row">
                <div class="news_list_left col-md-3">
                    <div class="left_title">
                        <h3>新闻分类</h3>
                    </div>
                    <div class="news_type_parent">
                        <ul class="nav nav-tabs news_type mobileScrollPlugin" role="tablist">
                            <li role="presentation" class="active"><a href="#newMessage" aria-controls="newMessage" @click="pageList(1,ARTICLE_TYPE.ARTICLE_NOTIFICATION.key)"
                                                                      role="tab" data-toggle="tab">{{ARTICLE_TYPE.ARTICLE_NOTIFICATION.value}}</a></li>
                            <li role="presentation"><a href="#newMessage" aria-controls="newMessage" role="tab" @click="pageList(1,ARTICLE_TYPE.ARTICLE_ACTIVE.key)"
                                                       data-toggle="tab">{{ARTICLE_TYPE.ARTICLE_ACTIVE.value}}</a></li>
                            <li role="presentation"><a href="#newMessage" aria-controls="newMessage" role="tab" @click="pageList(1,ARTICLE_TYPE.ARTICLE_FUNCTION.key)"
                                                       data-toggle="tab">{{ARTICLE_TYPE.ARTICLE_FUNCTION.value}}</a></li>
                            <li role="presentation"><a href="#newMessage" aria-controls="newMessage" role="tab" @click="pageList(1,ARTICLE_TYPE.ARTICLE_PRODUCT.key)"
                                                       data-toggle="tab">{{ARTICLE_TYPE.ARTICLE_PRODUCT.value}}</a></li>
                            <li role="presentation"><a href="#newMessage" aria-controls="newMessage" role="tab" @click="pageList(1,ARTICLE_TYPE.ARTICLE_INDUSTRY.key)"
                                                       data-toggle="tab">{{ARTICLE_TYPE.ARTICLE_INDUSTRY.value}}</a></li>
                            <li role="presentation"><a href="#newMessage" aria-controls="newMessage" role="tab" @click="pageList(1,ARTICLE_TYPE.ARTICLE_HEALTHY.key)"
                                                       data-toggle="tab">{{ARTICLE_TYPE.ARTICLE_HEALTHY.value}}</a></li>
                        </ul>
                        <div class="middleLine hidden-sm hidden-xs"></div>
                    </div>
                </div>

                <div class="news_list_right col-md-8">
                    <!-- Tab panes -->
                    <div class="tab-content" >
                        <!--<div role="tabpanel" class="tab-pane active" id="newMessage">
                            <div class="messageTime">
                                <div class="day">19日</div>
                                <div class="month">21年6月</div>
                            </div>
                            <div class="messageLeft">
                                <div class="news_title"><a>新闻标题：飞翔的月亮宝宝来了，它里面藏了黄金百万，所有1的梦想</a></div>
                                <div class="news_desc">
                                    新闻描述：以岭药业一般指石家庄以岭药业股份有限公司。国家重点高新技术企业——石家庄以岭药业股份有限公司由中国工程院吴以岭院士创建，在他的领导下，以岭药业始终坚持以科技为先导，以市场为龙头的科技创新
                                    发展战略，创立“理论—临床—科研—产业—教学”五位一...
                                </div>
                            </div>
                            <div id="messageRight" class="messageRight">
                                <img id="messageRightImg" src="">
                            </div>
                            <div class="messageOpt">
                                <button type="button" class="btn btn-danger">查看详情</button>
                            </div>
                        </div>-->
                        <div role="tabpanel" class="tab-pane active" id="newMessage">
                            <div role="tabpanel" class="tab-pane" v-for="(item,index) in articles" :key="index">
                                <div class="messageTime">
                                    <div class="day">{{item.createTime.day}}日</div>
                                    <div class="month">{{item.createTime.year}}年{{item.createTime.month}}月</div>
                                </div>
                                <div class="messageLeft">
                                    <div class="news_title"><a href="javascript:;" >{{item.name}}</a></div>
                                    <div class="news_desc">
                                        {{item.seoDescription}}
                                    </div>
                                </div>
                                <div class="messageRight">
                                    <img v-if="!item.picList[0]"  src="../../../public/base/imgs/carousel/slide_04_640x340.jpg">
                                    <img v-if="item.picList[0]"  :src="item.picList[0]">
                                </div>
                                <div class="messageOpt">
                                    <button type="button" class="btn btn-danger" @click="inNewsDetail(item)">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="pageHelper hidden-sm hidden-xs">
                    <!--<el-button class="flushBTN" type="primary" @click="pageList(1)">刷新数据</el-button>-->
                    <page-helper ref="pageHelper" :list="pageList"></page-helper>
                </div>
            </div>

        </div>
    </div>

</template>

<script>
    import PageHelper from "../../components/PageHelper";
    export default {
        name: "NewsList",
        components:{PageHelper},
        data(){
            return{
                message:"新闻列表",
                headerImg: '',
                articleImg: './base/imgs/carousel/slide_04_640x340.jpg',
                ARTICLE_TYPE:ARTICLE_TYPE,
                articles:[],
                article:{},
                createTime:{},
                picCover:"",
            }
        },
        mounted() {

            //初始化每页5条
            this.$refs.pageHelper.size=5;
            this.pageList(1,20);
            this.getNewsCover();

            let messageRightImg= document.getElementById("messageRightImg") || {};
            messageRightImg.src=this.articleImg;
            //不同设备获取视口宽度
            this.getWidth();
            //获取新闻类型总长度
            this.computeNewsType();
        },
        methods:{
            getHeaderImg() {
                let headerImg = document.getElementById("header_icon_img");
                /*背景图片：直接/base目录，如果在news下，则加.*/
                //headerImg.style.backgroundImage = "url('/base/imgs/news/news-header.e51a9e61.png')";
                headerImg.style.backgroundImage = "url("+this.picCover+")";
            },
            getWidth(){
                let lis=document.querySelectorAll(".news_list .news_list_left .nav-tabs li");
                $(window).on("resize",function () {
                    let currentWidth=$(window).width();
                    if(currentWidth>992){
                        for(let i=0;i<lis.length;i++){
                            lis[i].style="width:100%;";
                        }
                    }
                    if(currentWidth<=992 && currentWidth>768){
                        for(let i=0;i<lis.length;i++){
                            lis[i].style="width:45%;";
                        }
                    }
                    if(currentWidth<768){
                        for(let i=0;i<lis.length;i++){
                            lis[i].style="width:45%;";
                        }
                    }
                }).trigger("resize");
            },
            computeNewsType(){
                let newsUL=$(".news_list .news_list_left .nav-tabs");
                let newsUL1=$(".news_list .news_list_left .news_type");
                let lis=newsUL.find("li");
                let totalWidth=0;
                lis.each(function (index,value) {
                    totalWidth=totalWidth+$(value).innerWidth();
                });
                newsUL.width="width:'"+totalWidth+"'";
                newsUL1.width="width:'"+totalWidth+"'";
                //使用iscroll插件，移动端滑动
                let iscroll=new IScroll('.mobileScrollPlugin',{
                    scrollX:true,
                    scrollY:false
                })
            },
            pageList(page,typeId){
                if(Tool.isNotEmpty(typeId)){
                    this.typeId=typeId;
                }
                let loading = this.openLoading();
                this.$axios.post(process.env.VUE_APP_SERVER + '/business/client/article/page/list', {
                    typeId: this.typeId,
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    setTimeout(function () {
                        loading.close();
                    }, 200);
                    let resp = response.data;
                    this.articles = resp.responseData.listPageData;
                    for(let i=0;i<this.articles.length;i++){
                        let createTime= this.articles[i].createTime;
                        let year=createTime.substring(0,4);
                        let month=createTime.substring(5,7);
                        let day=createTime.substring(8,10);
                        let time=createTime.substring(11);
                        this.createTime.year=year;
                        this.createTime.month=month;
                        this.createTime.day=day;
                        this.createTime.time=time;
                        this.articles[i].createTime=this.createTime;
                    }
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);
                })
            },
            getNewsCover(){
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/article/picCover')
                    .then((response) => {
                    setTimeout(function () {
                        loading.close();
                    }, 200);
                    let resp = response.data;
                    this.article = resp.responseData[0];
                    this.picCover=this.article.picList[0];
                    this.getHeaderImg();
                })
            },
            inNewsDetail(item){
                SessionStorage.set(ARTICLE,item);
                this.$router.push({
                    name:"detail",
                    params:{item}
                });
            }
        }
    }
</script>

<style scoped>
    .news {
        /*clear取消默认继承上一级标签属性*/
        clear: both;
    }

    .news .header_icon {
        cursor: pointer;
    }

    .news .header_icon #header_icon_img {
        text-decoration: none;
        color: white;
        width: 100%;
        height: 150px;
        display: block;
        background-position: center;
        /*避免图片尺寸不一样，进行填充屏幕*/
        background-size: cover;
    }

    .news .header_icon #header_icon_img span {
        width: 100%;
        display: inline-block;
        line-height: 150px;
        font-size: 40px;
        text-align: center;
    }

    /*新闻类型*/
    .news_list {
        position: relative;
        padding: 20px;
    }

    .news_list .news_list_left {
    }

    .news_list .news_list_left .left_title {
        line-height: 50px;
        font-size: 25px;
        border-bottom: 2px solid #ccc;
        text-align: center;
        position: relative;
    }
    /*加入伪元素：方块*/
    .news_list .news_list_left .left_title::before {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        right: -10px;
        bottom: -5px;
        background-color: #ccc;
    }
    /*移动端滑块，建立nav-tabs父级*/
    .news_list .news_list_left .news_type_parent{
        width: 100%;
        overflow: hidden;
    }
    .news_list .news_list_left .news_type {
        font-size: 15px;

    }

    .news_list .news_list_left .nav-tabs {
        border-bottom: 0;
        min-width: 180px;
    }

    .news_list .news_list_left .nav-tabs li {
        padding: 0 20px;
        width: 100%;
        text-align: center;
        margin: 5px;
        position: relative;
        font-weight: bolder;
    }

    /*分类添加圆点*/
    .news_list .news_list_left .nav-tabs li::before {
        content: "";
        width: 15px;
        height: 15px;
        position: absolute;
        right: 13px;
        bottom: 23px;
        border-radius: 50%;
        background-color: #fff;
        z-index: 1;
    }

    .news_list .news_list_left .nav-tabs li a {
        line-height: 40px;
        border: none;
        border-radius: 0;
        background-color: #fff;
    }

    .news_list .news_list_left .nav-tabs li.active > a,
    .news_list .news_list_left .nav-tabs li a:hover,
    .news_list .news_list_left .nav-tabs li a:focus {
        border: none;
        border-radius: 0;
        background-color: #e92322;
        color: white;
        font-weight: bolder;
    }

    /*中栏竖线*/
    .news_list {
        position: relative;
    }

    .news_list .middleLine {
        width: 2px;
        height: 100%;
        position: absolute;
        border-left: 2px dashed #ccc;
        right: -30px;
        top: 0;
    }

    /*右侧栏*/
    .news_list .news_list_right {
        margin-left: 1%;
        margin-top: 5px;
    }

    /*右侧栏目文章样式*/
    .news_list .news_list_right .tab-content {
        position: relative;
    }

    .news_list .news_list_right .tab-content .tab-pane {
        height: 95px;
        padding: 5px 10px;
        position: relative;
        width: 100%;
    }
    /*日期格式*/
    .news_list .news_list_right .tab-content .tab-pane .messageTime {
        width: 100px;
        height: 80px;
        display: inline-block;
        float: left;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageTime .day{
        background-color: #fdeab3;
        font-size: 24px;
        width: 94px;
        text-align: center;
        display: inline-block;
        padding: 10px;
        margin-bottom: 2px;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageTime .month{
        background-color: #f8de95;
        display: inline-block;
        padding: 3px 10px;
    }

    .news_list .news_list_right .tab-content .tab-pane .messageLeft {
        margin-right: 200px;
        max-width: 700px;

    }
    .news_list .news_list_right .tab-content .tab-pane .messageLeft .news_title{
        line-height: 40px;
        font-size: 18px;
        font-weight: bolder;
        /*文字省略：单行*/
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageLeft .news_title a{
        text-decoration: none;
        cursor: pointer;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageLeft .news_title a:hover,
    .news_list .news_list_right .tab-content .tab-pane .messageLeft .news_title a:focus{
        color: #e92322;
    }

    .news_list .news_list_right .tab-content .tab-pane .messageLeft .news_desc{
        /*文字省略：多行*/
        max-width: 700px;
        line-height: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        position: relative;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageLeft .news_desc::after{
        /*content: "...";
        position: absolute;
        bottom: 0;
        right: 0;*/
    }
    .news_list .news_list_right .tab-content .tab-pane .messageRight {
        max-width: 150px;
        /*左对齐float无效果，需要定位*/
        position: absolute;
        right: 60px;
        top: 8px;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageRight #messageRightImg{
        position: absolute;
        max-width: 150px;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageRight img{
        max-width: 150px;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageOpt {
        width: 100px;
        height: 90px;
        position: absolute;
        right: -40px;
        top: 7.5px;
    }
    .news_list .news_list_right .tab-content .tab-pane .messageOpt button{
        background-color: #e92322;
        max-width: 60px;
        padding: 20px 10px;
        word-break: break-all;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 6px ;
        border-bottom-right-radius: 6px;
        border-width: 0;
        line-height: 20px;
        /*bootstrap默认样式不允许换行*/
        white-space: normal;

    }

    /**分页位置/
     */
    .pageHelper {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 40%;
        display: inline-block;
    }
</style>